<template>
  <el-menu
    :default-active="activeIndex"
    mode="horizontal"
    >
    <el-menu-item v-for="item in menuList" :key="item.value" :index="item.value">{{ item.label }}</el-menu-item>
  </el-menu>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import router from '../router'
import { useRoute } from 'vue-router'

const route = useRoute()

const menuList = computed(() => {
  return router.getRoutes().filter(route => route.meta?.topMenu).map(route => {
    return {
      label: (route.meta as {
        topMenu: {
          label: string
        }
      }).topMenu.label,
      value: route.path,
    }
  })
})

const activeIndex = computed(() => {
  return menuList.value.find(item => route.path.startsWith(item.value))?.value
})
</script>